<template>
    <view class="container">
        <header-nav :config="config" :defaultActiveIndex="defaultActiveIndex" @tabChange="tabChange"></header-nav>
        <date-tab-bar @getNewData="refreshData" :isFilter="true" background="#fff" />
        <view class="main">
            <view class="detail-card">
                <view class="sale-money">
                    <view class="text">销售金额</view>
                    <view class="price">
                        <view class="unit">¥</view>
                        <view class="num">{{ saleStatistics.Total }}</view>
                    </view>
                </view>
                <view class="count-wrapper">
                    <view class="left">
                        <view class="text">销售笔数</view>
                        <view class="count">{{ saleStatistics.BillCount }}</view>
                    </view>
                    <view class="right">
                        <view class="text">销售数量</view>
                        <view class="count">
                            <view class="num">{{ saleStatistics.Qty }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="list-header">
                <view class="left-wrapper">
                    <view class="h-item">序号</view>
                    <view class="h-item h-name" v-show="searchForm.type == 2">客户名称</view>
                    <view class="h-item h-name" v-show="searchForm.type == 3">业务员</view>
                    <view class="h-item h-name" v-show="searchForm.type == 5">部门</view>
                    <view class="h-item h-name" v-show="searchForm.type == 7">商品名称</view>
                </view>
                <view class="right-wrapper">
                    <view class="h-item h-turnover" :class="{ ascending: sort1 == 1, descending: sort1 == 2 }">
                        销售量
                        <!-- <view class="caret">
                                    <view class="sort-caret ascending"></view>
                                    <view class="sort-caret descending"></view>
                                </view> -->
                    </view>
                    <view class="h-item h-profit" :class="{ ascending: sort2 == 1, descending: sort2 == 2 }">
                        销售额
                        <!-- <view class="caret">
                                    <view class="sort-caret ascending"></view>
                                    <view class="sort-caret descending"></view>
                                </view> -->
                    </view>
                </view>
            </view>
            <cost-list
                ref="costList"
                :type="searchForm.type"
                :height="sublistHeight"
                @totalBack="waitTotalBack"></cost-list>
        </view>
    </view>
</template>

<script>
import headerNav from "../components/header-nav.vue"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import tabBar from "../components/tab-bar.vue"
import dateTabBar from "../components/date-tab-bar.vue"
import costList from "./cost-list.vue"
import { getSaleStatistics } from "@/service/api/erp.js"
import chooseDate from "../components/choose-date.vue"
import { mapState, mapMutations } from "vuex"
import { CHANGE_SALE_SELECTED,CHANGE_CUSTOM_SELECTED,CHANGE_PROJECT_SELECTED,CHANGE_MARKETING_SELECTED } from "@/store/mutation-type.js"

export default {
    components: {
        headerNav,
        costList,
        tabBar,
        chooseDate,
        dateTabBar,
    },
    computed: {
        ...mapState("report", ["startDate", "endDate", "selectedSalesman","selectedCustoms","selectedProject","selectedMarketing"]),
    },
    data() {
        return {
            config: {
                centerSlot: true,
                rightSlot: false,
                color: ["#333333"],
                rightBtns: [],
                tabs: [
                    {
                        title: "主页",
                    },
                    {
                        title: "部门",
                    },
                    {
                        title: "业务员",
                    },
                    {
                        title: "客户",
                    },
                    {
                        title: "商品",
                    },
                    {
                        title: "应收",
                    },
                ],
            },
            listHeight: "",
            sublistHeight: "",
            loadOk: true,
            tabIndex: 0,
            waitTotal: 0,
            total: 0,
            sorts: ["sort1", "sort2"],
            sort1: 0, // 销量排序
            sort2: 0, // 利润排序
            searchForm: {
                type: "2", // 切换的类型 2：客户 3：业务员 4：仓库 7:商品
                // sortType: 0, // 0：不排序；1：升序；2：降序
                // sortColumn: "", // Total 净销售额  MaoriProfit 净利润
            },
            saleStatistics: {}, // 销售统计
            defaultActiveIndex: 3,
        }
    },
    onLoad() {
        this.initFilterData()
    },
    created() {
        let mainColor = this.easyGetColor("white")
        this.config.backgroundColor = [1, mainColor]
    },
    mounted() {
        this.getListHeight()
        setTimeout(() => {
            if (this.$refs.costList) {
                this.$refs.costList.refresh(this.searchForm)
            }
        }, 300)
    },
    onShow() {
        this.init()
    },
    methods: {
        ...mapMutations("report", [CHANGE_SALE_SELECTED,CHANGE_CUSTOM_SELECTED,CHANGE_PROJECT_SELECTED]),
        refreshData() {
            this.init()
            this.setList()
        },
        initFilterData() {
            this[CHANGE_SALE_SELECTED]()
            this[CHANGE_CUSTOM_SELECTED]()
            this[CHANGE_PROJECT_SELECTED]()
        },
        init() {
            const params = {
                startDate: this.startDate,
                endDate: this.endDate,
                type: this.searchForm.type,
            }
            if (this.selectedSalesman) {
                params.eCodeArr = [this.selectedSalesman.UserCode]
            }
			if (this.selectedCustoms.length >0) {
				params.bCodeArr = []
				this.selectedCustoms.forEach((e)=>{
					params.bCodeArr.push(e.UserCode)
				})
			}
			if (this.selectedProject.length >0) {
				params.projectArr = []
				this.selectedProject.forEach((e)=>{
					params.projectArr.push(e.ProjectNo)
				})
			}
			if (this.selectedMarketing.length >0) {
				params.organizationsArr = []
				this.selectedMarketing.forEach((e)=>{
					params.organizationsArr.push(e.OrganizationsNo)
				})
			}
			
            getSaleStatistics(params).then((res) => {
                if (res.State == 1) {
                    this.saleStatistics = res.Data
                }
            })
        },
        // 重置列表
        setList() {
            this.$refs.costList.refresh(this.searchForm)
        },
        tabChange(e) {
            switch (e) {
                case 0: // 主页
                    this.easyGoTo(`/pages_erpA8/index`)
                    break
                case 1: // 部门
                    this.searchForm.type = "5"
                    break
                case 2: // 业务员
                    this.searchForm.type = "3"
                    break
                case 3: // 客户
                    this.searchForm.type = "2"
                    break
                case 4: // 商品
                    this.searchForm.type = "7"
                    break
                case 5: // 应收
                    this.easyGoTo("/pages_erpA8/debt-receivable/index")
                    break
            }
            this.refreshData()
        },
        getListHeight() {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                this.listHeight = e + "px"
                this.sublistHeight = e - uni.upx2px(406) + "px"
                this.loadOk = true
            })
        },
        waitTotalBack() {},
        changeSort(type, name) {
            let otherSorts = this.sorts.filter((res) => res != type)
            otherSorts.forEach((element) => {
                this[element] = "0"
            })
            if (this[type] == 2) {
                this[type] = 0
            } else {
                this[type]++
            }
            this.searchForm.sortType = this[type]
            this.searchForm.sortColumn = name
            this.$refs.costList.refresh(this.searchForm)
        },
    },
}
</script>

<style lang="scss">
.detail-card {
    margin: 16rpx;
    height: 294rpx;
    padding: 32rpx 0 22rpx 40rpx;
    box-sizing: border-box;
    background: $app-color-main;
    color: $color-white;
    box-shadow: 0rpx 10rpx 28rpx 0rpx rgba(0, 0, 0, 0.06);
    border-radius: 22rpx;
    .sale-money {
        .text {
            margin-bottom: 12rpx;
            font-size: 28rpx;
        }
        .price {
            display: flex;
            align-items: flex-end;
            font-weight: 700;

            .unit {
                margin-bottom: 6rpx;
            }

            .num {
                margin-left: 6rpx;
                font-size: 48rpx;
            }
        }
    }

    .count-wrapper {
        display: flex;
        margin-top: 34rpx;
        .left,
        .right {
            flex: 1;
            .text {
                margin-bottom: 12rpx;
                font-size: 24rpx;
            }

            .count {
                font-weight: 700;
                font-size: 44rpx;
            }
        }

        .right {
            .count {
                display: flex;
                align-items: flex-end;
                .unit {
                    margin-bottom: 6rpx;
                    font-size: 24rpx;
                }
            }
        }
    }
}

.list-header {
    display: flex;
    align-items: center;
    height: 80rpx;
    padding-left: 32rpx;
    // padding-right: 60rpx;
    background: #ffffff;
    box-shadow: 0px 6rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;

    .left-wrapper,
    .right-wrapper {
        flex: 1;
        display: flex;
        align-items: center;
    }

    .right-wrapper {
        .h-item {
            flex: 1;
        }
    }

    .h-item {
        text-align: center;
        font-size: $size-28;
        font-weight: bold;

        &.h-name {
            margin-left: 48rpx;
            text-align: left;
        }

        &.h-turnover {
            display: flex;
            align-items: center;
        }

        &.h-profit {
            display: flex;
            align-items: center;
        }

        &.ascending {
            .caret {
                .sort-caret {
                    &.ascending {
                        border-bottom-color: $app-color-main;
                    }
                }
            }
        }

        &.descending {
            .caret {
                .sort-caret {
                    &.descending {
                        border-top-color: $app-color-main;
                    }
                }
            }
        }

        .caret {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            height: 34px;
            width: 24px;
            vertical-align: middle;
            cursor: pointer;
            overflow: initial;
            position: relative;

            .sort-caret {
                width: 0;
                height: 0;
                border: 6rpx solid transparent;
                position: absolute;
                left: 7px;

                &.ascending {
                    border-bottom-color: #434c67;
                    top: 22rpx;
                }

                &.descending {
                    border-top-color: #434c67;
                    bottom: 18rpx;
                }
            }
        }
    }
}
</style>
